<!-- 用例任务报告概要，包含执行信息、进度、BUG、总结信息等 -->
<template>
  <div class="div_box">
    <div style="min-width: 1600px;">
      <el-row :gutter="5">
        <el-col :span="12">
          <div class="borderDiv">
            <div id="sy" ref="sy" class="table-sy">
              <div v-if="taskReportBaseInfoObj.status === 0" style="color: #d2d6d9;">待测试</div>
              <div v-if="taskReportBaseInfoObj.status === 1" style="color: #EB6709;">测试中</div>
              <div v-if="taskReportBaseInfoObj.status === 2" style="color: #ffba00;">挂起</div>
              <div v-if="taskReportBaseInfoObj.status === 3" style="color: #13ce66;">测试通过</div>
              <div v-if="taskReportBaseInfoObj.status === 4" style="color: #ff4949;">测试失败</div>
            </div>
            <el-descriptions title="测试报告：" :label-style="labelStyle" :column="column" style="height: 350px;">
              <template slot="extra">
                <el-button type="primary" size="small" @click="manualTestTask()">执行</el-button>
              </template>
              <el-descriptions-item label="任务名称">{{ taskReportBaseInfoObj.taskName }}</el-descriptions-item>
              <el-descriptions-item label="所属需求">{{ taskReportBaseInfoObj.demandName }}</el-descriptions-item>
              <el-descriptions-item label="负责人">{{ taskReportBaseInfoObj.creator }}</el-descriptions-item>
              <el-descriptions-item label="参与人">{{ taskReportBaseInfoObj.exector }}</el-descriptions-item>
              <el-descriptions-item label="开始时间">{{ taskReportBaseInfoObj.startTime }}</el-descriptions-item>
              <el-descriptions-item label="结束时间">{{ taskReportBaseInfoObj.endTime }}</el-descriptions-item>
              <el-descriptions-item label="测试总结">
                <el-input
                  v-model="textarea"
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 9}"
                  placeholder="请在这里写测试总结，一个任务中只能写一份测试总结"
                />
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="borderDiv">
            <el-row>
              <el-col :span="12">
                <div ref="pipeA" style="height: 350px;" />
              </el-col>
              <el-col :span="12">
                <div ref="pipeB" style="height: 350px;" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <div class="borderDiv">BUG列表清单（TODO）</div>
      <div class="borderDiv">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane name="passed">
            <span slot="label">通过（{{ passedCaseList.length }}）</span>
            <el-table :data="passedCaseList" style="width: 100%; max-height: 600px; overflow-y: auto;">
              <el-table-column prop="caseNum" label="用例编号" width="300" />
              <el-table-column prop="caseName" label="用例名称" width="400" />
              <el-table-column prop="caseLevel" label="用例级别" width="100" />
              <el-table-column prop="result" label="结果" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.result === 1" type="success">成功</el-tag>
                  <el-tag v-if="scope.row.result === 2" type="danger">失败</el-tag>
                  <el-tag v-if="scope.row.result === 3" type="warning">阻塞</el-tag>
                  <el-tag v-if="scope.row.result === 0" type="info">未执行</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="exector" label="执行人" width="100" />
              <el-table-column prop="remark" label="备注" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="failed">
            <span slot="label">失败（{{ failedCaseList.length }}）</span>
            <el-table :data="failedCaseList" style="width: 100%; max-height: 600px; overflow-y: auto;">
              <el-table-column prop="caseNum" label="用例编号" width="300" />
              <el-table-column prop="caseName" label="用例名称" width="400" />
              <el-table-column prop="caseLevel" label="用例级别" width="100" />
              <el-table-column prop="result" label="结果" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.result === 1" type="success">成功</el-tag>
                  <el-tag v-if="scope.row.result === 2" type="danger">失败</el-tag>
                  <el-tag v-if="scope.row.result === 3" type="warning">阻塞</el-tag>
                  <el-tag v-if="scope.row.result === 0" type="info">未执行</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="exector" label="执行人" width="100" />
              <el-table-column prop="remark" label="备注" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="blocked">
            <span slot="label">阻塞（{{ blockedCaseList.length }}）</span>
            <el-table :data="blockedCaseList" style="width: 100%; max-height: 600px; overflow-y: auto;">
              <el-table-column prop="caseNum" label="用例编号" width="300" />
              <el-table-column prop="caseName" label="用例名称" width="400" />
              <el-table-column prop="caseLevel" label="用例级别" width="100" />
              <el-table-column prop="result" label="结果" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.result === 1" type="success">成功</el-tag>
                  <el-tag v-if="scope.row.result === 2" type="danger">失败</el-tag>
                  <el-tag v-if="scope.row.result === 3" type="warning">阻塞</el-tag>
                  <el-tag v-if="scope.row.result === 0" type="info">未执行</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="exector" label="执行人" width="100" />
              <el-table-column prop="remark" label="备注" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane name="na">
            <span slot="label">未执行（{{ nullCaseList.length }}）</span>
            <el-table :data="nullCaseList" style="width: 100%; max-height: 600px; overflow-y: auto;">
              <el-table-column prop="caseNum" label="用例编号" width="300" />
              <el-table-column prop="caseName" label="用例名称" width="400" />
              <el-table-column prop="caseLevel" label="用例级别" width="100" />
              <el-table-column prop="result" label="结果" width="100">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.result === 1" type="success">成功</el-tag>
                  <el-tag v-if="scope.row.result === 2" type="danger">失败</el-tag>
                  <el-tag v-if="scope.row.result === 3" type="warning">阻塞</el-tag>
                  <el-tag v-if="scope.row.result === 0" type="info">未执行</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="exector" label="执行人" width="100" />
              <el-table-column prop="remark" label="备注" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import { taskReportBaseInfo, taskReportCaseInfo } from '@/api/auto/task.js'
import echarts from 'echarts'
export default {
  name: 'AutoCaseTaskReport',
  data() {
    return {
      labelStyle: { 'font-weight': 'bold' },
      column: 2,
      activeName: 'passed',
      taskReportBaseInfoObj: {},
      passedCaseList: [],
      failedCaseList: [],
      blockedCaseList: [],
      nullCaseList: [],
      textarea: ''
    }
  },
  created() {
    this.taskReportBaseInfo()
    this.taskReportCaseInfo()
  },
  activated() {
    this.taskReportBaseInfo()
    this.taskReportCaseInfo()
  },
  methods: {
    manualTestTask() {
      this.$nextTick(() => {
        this.$router.push({
          name: 'AutoTaskCaseList',
          params: {
            taskId: this.$route.params.taskId
          }
        })
      })
    },
    taskReportBaseInfo() {
      taskReportBaseInfo(this.$route.params.taskId).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.taskReportBaseInfoObj = respnose.data
          this.pipeA()
          this.pipeB()
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    taskReportCaseInfo() {
      taskReportCaseInfo(this.$route.params.taskId).then(respnose => {
        if (respnose && respnose.code === 200) {
          this.passedCaseList = respnose.data.passedCaseList
          this.failedCaseList = respnose.data.failedCaseList
          this.blockedCaseList = respnose.data.blockedCaseList
          this.nullCaseList = respnose.data.nullCaseList
        } else {
          this.$message.error(respnose.message)
        }
      })
    },
    pipeA() {
      let pipeA = echarts.getInstanceByDom(this.$refs.pipeA)
      if (!pipeA) {
        pipeA = echarts.init(this.$refs.pipeA, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(pipeA)
        })
      }
      const option = {
        title: {
          text: '用例执行统计',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series:
          {
            type: 'pie',
            radius: [50, 80],
            left: 'center',
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 个用例}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            data: this.taskReportBaseInfoObj.pipA
          }
      }
      pipeA.setOption(option)
    },
    pipeB() {
      let pipeB = echarts.getInstanceByDom(this.$refs.pipeB)
      if (!pipeB) {
        pipeB = echarts.init(this.$refs.pipeB, 'light')
        this.$once('hook:beforeDestroy', function() {
          echarts.dispose(pipeB)
        })
      }
      const option = {
        title: {
          text: '执行人数据统计',
          left: 'center',
          textStyle: {
            color: '#999',
            fontWeight: 'normal',
            fontSize: 14
          }
        },
        series:
          {
            type: 'pie',
            radius: [50, 80],
            left: 'center',
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{time|{c} 个用例}',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
            data: this.taskReportBaseInfoObj.pipB
          }
      }
      pipeB.setOption(option)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style scoped="scoped">
.div_box {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: auto;
}
.borderDiv {
  border: 1px solid #eee;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  position: relative;
}
.table-sy {
  position: absolute;
  right: 10px;
  top: 50px;
  pointer-events: none; /*主要是这个属性*/
  color:#d2d6d9;
  z-index: 99999999999;
  font-size: 50px;
  font-family: STCaiyun;
}
.table-sy > div {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(30deg);
  float: left;
}
</style>
